---
id: api-react-components-sorting
slug: /search-ui/api/react/components/sorting
title: Sorting
date: 2022-02-27
tags: ["demo"]
---

Shows a dropdown for selecting the current Sort.

### Example

```jsx

import { Sorting } from "@elastic/react-search-ui";

...

<Sorting
  sortOptions={[
    {
      name: "Relevance",
      value: "",
      direction: ""
    },
    {
      name: "Title",
      value: "title",
      direction: "asc"
    }
  ]}
/>
```

### Properties

| Name        | Description                                                                                                                                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className   |                                                                                                                                                                                                               |
| label       | A static label to show in the Sorting Component.                                                                                                                                                              |
| sortOptions |                                                                                                                                                                                                               |
| view        | Used to override the default view for this Component. See <DocLink id="guides-customizing-styles-and-html" section="customizing-html" text="Customization: Component views and HTML" /> for more information. |
